<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    nav{
        width: 100%;
        height: 50px;
        border: 1px solid lavender;
        border-radius: 5px;
    }
    .article{
        width: 500px;
        height: 50px;
        margin: 0 auto;
    }
    ul{
        display: grid;
        width: 500px;
        height: 50px;
        grid-template-rows:repeat(1,100%);
        grid-template-columns: repeat(5,100px);
        text-align: center;
        list-style: none;
    }
    li{
        border: 1px solid wheat;
        background: red;
        line-height: 3;
    }
</style>
<body>
<nav>
    <div class="article">
        <ul>
            <li>首页</li>
            <li>数码</li>
            <li>科技</li>
            <li>音乐</li>
            <li>娱乐</li>
        </ul>
    </div>
</nav>
</body>
</html>